<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-24 16:33:27
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-18 20:23:32
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamNoticeBoard/peopleOverView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 沟通目标达成率 -->
  <div class="flex flex-col gap-4 px-2">
    <ChartContainer title="目标达成详情" subtitle="">
      <CircleChart :data="data" />
    </ChartContainer>

    <scoreTable
      :memberBoardList="[currentMemberInfo]"
      :isTeam="false"
      :enableFilter="false"
      :enableSort="false"
    />
  </div>
</template>

<script setup>
import scoreTable from "@/views/myXmate/components/scoreTable.vue";
import CircleChart from "@/components/charts/circleChart.vue";
import ChartContainer from "@/views/myXmate/myTeam/teamNoticeBoard/visitSituation/chartContainer.vue";
import { defineProps, computed } from "vue";
import { useMyXmateStore } from "@/store";

const myXmateStore = useMyXmateStore();
const memberBoardList = computed(() => myXmateStore.memberBoardList);

const currentMemberInfo = computed(() => {
  return memberBoardList.value.find((item) => item.id === props.id) || {};
});

const achievedCount = computed(() => {
  return currentMemberInfo.value.visitTargetAchievedCount || 0;
});

const unachievedCount = computed(() => {
  return currentMemberInfo.value.visitTargetNotAchievedCount || 0;
});

const undeterminedCount = computed(() => {
  return Math.max(
    0,
    (currentMemberInfo.value.totalVisitCount || 0) -
      achievedCount.value -
      unachievedCount.value
  );
});

const data = computed(() => {
  return [
    { value: achievedCount.value, name: "达成", type: "completed" },
    { value: unachievedCount.value, name: "未达成", type: "uncompleted" },
    { value: undeterminedCount.value, name: "无法判定", type: "undetermined" },
  ];
});

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});
</script>

<style lang="less" scoped></style>
